<template>
	<ComPop
		v-model="show"
		width="70%"
		title="新增司机"
		@saveSubmit="saveProSubmit"
	>
		<el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
			<!-- 基础信息 -->
			<el-card class="mb-4" shadow="never">
				<template #header>
					<span>基础信息</span>
				</template>
				<el-row :gutter="20" class="mb-4">
					<el-col :span="8">
						<el-form-item label="司机姓名" prop="name">
							<el-input
								v-model="form.name"
								maxlength="20"
								show-word-limit
								placeholder="请输入司机姓名"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="电话号码" prop="phone">
							<el-input
								v-model="form.phone"
								maxlength="11"
								placeholder="请输入电话号码"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="性别" prop="gender">
							<el-select v-model="form.gender" placeholder="请选择性别">
								<el-option label="男" value="男" />
								<el-option label="女" value="女" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20" class="mb-4">
					<el-col :span="8">
						<el-form-item label="身份证号" prop="idCardNum">
							<el-input
								v-model="form.idCardNum"
								maxlength="18"
								placeholder="请输入身份证号"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="有效期起始" prop="idCardStart">
							<el-date-picker
								v-model="form.idCardStart"
								type="date"
								placeholder="选择日期"
								style="width: 100%"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="有效期截止" prop="idCardEnd">
							<el-date-picker
								v-model="form.idCardEnd"
								type="date"
								placeholder="选择日期"
								style="width: 100%"
							/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20" class="mb-4">
					<el-col :span="8">
						<el-form-item label="驾驶证号" prop="driverLicenseNum">
							<el-input
								v-model="form.driverLicenseNum"
								maxlength="20"
								placeholder="请输入驾驶证号"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="有效期起始" prop="driverLicenseStart">
							<el-date-picker
								v-model="form.driverLicenseStart"
								type="date"
								placeholder="选择日期"
								style="width: 100%"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="有效期截止" prop="driverLicenseEnd">
							<el-date-picker
								v-model="form.driverLicenseEnd"
								type="date"
								placeholder="选择日期"
								style="width: 100%"
							/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20" class="mb-4">
					<el-col :span="8">
						<el-form-item label="驾照类型" prop="licenseType">
							<el-select
								v-model="form.licenseType"
								placeholder="请选择驾照类型"
							>
								<el-option label="A1" value="A1" />
								<el-option label="A2" value="A2" />
								<el-option label="A3" value="A3" />
								<el-option label="B1" value="B1" />
								<el-option label="B2" value="B2" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="紧急联系人" prop="emergencyContact">
							<el-input
								v-model="form.emergencyContact"
								maxlength="20"
								show-word-limit
								placeholder="请输入紧急联系人"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="紧急联系电话" prop="emergencyPhone">
							<el-input
								v-model="form.emergencyPhone"
								maxlength="11"
								placeholder="请输入紧急联系电话"
							/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20" class="mb-4">
					<el-col :span="8">
						<el-form-item label="从业资格证号" prop="qualificationNum">
							<el-input
								v-model="form.qualificationNum"
								maxlength="20"
								placeholder="请输入从业资格证号"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="有效期起始" prop="qualificationStart">
							<el-date-picker
								v-model="form.qualificationStart"
								type="date"
								placeholder="选择日期"
								style="width: 100%"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="有效期截止" prop="qualificationEnd">
							<el-date-picker
								v-model="form.qualificationEnd"
								type="date"
								placeholder="选择日期"
								style="width: 100%"
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-card>
			<!-- 账户信息 -->
			<el-card class="mb-4" shadow="never">
				<template #header>
					<span>账户信息</span>
				</template>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="开户行名称" prop="bankName">
							<el-input
								v-model="form.bankName"
								maxlength="30"
								placeholder="请输入开户行名称"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="账号名称" prop="accountName">
							<el-input
								v-model="form.accountName"
								maxlength="30"
								placeholder="请输入账号名称"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="账 号" prop="accountNum">
							<el-input
								v-model="form.accountNum"
								maxlength="30"
								placeholder="请输入账号"
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-card>
			<!-- 附件信息 -->
			<el-card shadow="never">
				<template #header>
					<span>附件信息</span>
				</template>
				<el-row :gutter="20" class="mb-4">
					<el-col :span="12">
						<el-form-item label="司机头像" prop="avatar">
							<!-- 上传头像组件 -->
							<el-upload
								class="avatar-uploader"
								action="#"
								:show-file-list="false"
								:on-success="(res, file) => handleUpload('avatar', res, file)"
							>
								<img v-if="form.avatar" :src="form.avatar" class="avatar" />
								<el-icon v-else class="avatar-uploader-icon">
									<Plus />
								</el-icon>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20" class="mb-4">
					<el-col :span="12">
						<el-form-item label="身份证正面" prop="idCardFront">
							<el-upload
								action="#"
								:show-file-list="false"
								:on-success="
									(res, file) => handleUpload('idCardFront', res, file)
								"
							>
								<img
									v-if="form.idCardFront"
									:src="form.idCardFront"
									class="avatar"
								/>
								<el-icon v-else class="avatar-uploader-icon">
									<Plus />
								</el-icon>
							</el-upload>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="身份证反面" prop="idCardBack">
							<el-upload
								action="#"
								:show-file-list="false"
								:on-success="
									(res, file) => handleUpload('idCardBack', res, file)
								"
							>
								<img
									v-if="form.idCardBack"
									:src="form.idCardBack"
									class="avatar"
								/>
								<el-icon v-else class="avatar-uploader-icon">
									<Plus />
								</el-icon>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="驾驶证" prop="driverLicenseImg">
							<el-upload
								action="#"
								:show-file-list="false"
								:on-success="
									(res, file) => handleUpload('driverLicenseImg', res, file)
								"
							>
								<img
									v-if="form.driverLicenseImg"
									:src="form.driverLicenseImg"
									class="avatar"
								/>
								<el-icon v-else class="avatar-uploader-icon">
									<Plus />
								</el-icon>
							</el-upload>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="从业资格证" prop="qualificationImg">
							<el-upload
								action="#"
								:show-file-list="false"
								:on-success="
									(res, file) => handleUpload('qualificationImg', res, file)
								"
							>
								<img
									v-if="form.qualificationImg"
									:src="form.qualificationImg"
									class="avatar"
								/>
								<el-icon v-else class="avatar-uploader-icon">
									<Plus />
								</el-icon>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-card>
		</el-form>
	</ComPop>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { Plus } from '@element-plus/icons-vue';
const show = ref(false);
const formRef = ref();
const form = reactive({
	name: '',
	phone: '',
	gender: '',
	idCardNum: '',
	idCardStart: '',
	idCardEnd: '',
	driverLicenseNum: '',
	driverLicenseStart: '',
	driverLicenseEnd: '',
	licenseType: '',
	emergencyContact: '',
	emergencyPhone: '',
	qualificationNum: '',
	qualificationStart: '',
	qualificationEnd: '',
	bankName: '',
	accountName: '',
	accountNum: '',
	avatar: '',
	idCardFront: '',
	idCardBack: '',
	driverLicenseImg: '',
	qualificationImg: '',
});
const rules = {
	name: [
		{ required: true, message: '请输入司机姓名', trigger: 'blur' },
		{ min: 2, max: 20, message: '姓名长度为2-20个字符', trigger: 'blur' },
	],
	phone: [
		{ required: true, message: '请输入电话号码', trigger: 'blur' },
		{
			pattern: /^1[3-9]\d{9}$/,
			message: '请输入正确的手机号',
			trigger: 'blur',
		},
	],
	gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
	idCardNum: [
		{ required: true, message: '请输入身份证号', trigger: 'blur' },
		{
			pattern: /^(\d{15}|\d{18}|\d{17}[\dXx])$/,
			message: '请输入正确的身份证号',
			trigger: 'blur',
		},
	],
	idCardStart: [
		{ required: true, message: '请选择身份证有效期起始', trigger: 'change' },
	],
	idCardEnd: [
		{ required: true, message: '请选择身份证有效期截止', trigger: 'change' },
	],
	driverLicenseNum: [
		{ required: true, message: '请输入驾驶证号', trigger: 'blur' },
	],
	driverLicenseStart: [
		{ required: true, message: '请选择驾驶证有效期起始', trigger: 'change' },
	],
	driverLicenseEnd: [
		{ required: true, message: '请选择驾驶证有效期截止', trigger: 'change' },
	],
	licenseType: [
		{ required: true, message: '请选择驾照类型', trigger: 'change' },
	],
	emergencyContact: [
		{ required: true, message: '请输入紧急联系人', trigger: 'blur' },
		{ min: 2, max: 20, message: '紧急联系人长度为2-20个字符', trigger: 'blur' },
	],
	emergencyPhone: [
		{ required: true, message: '请输入紧急联系电话', trigger: 'blur' },
		{
			pattern: /^1[3-9]\d{9}$/,
			message: '请输入正确的手机号',
			trigger: 'blur',
		},
	],
	/*qualificationNum: [{ required: true, message: "请输入从业资格证号", trigger: "blur" }],
    qualificationStart: [
      { required: true, message: "请选择从业资格证有效期起始", trigger: "change" },
    ],
    qualificationEnd: [
      { required: true, message: "请选择从业资格证有效期截止", trigger: "change" },
    ],*/
};
function handleUpload(field: string, res: any, file: any) {
	// TODO: 实际项目中应取后端返回的url
	(form as any)[field] = URL.createObjectURL(file.raw);
}
function saveProSubmit() {
	formRef.value.validate((valid: boolean) => {
		if (valid) {
			// TODO: 提交表单逻辑
			show.value = false;
		}
	});
}
function open() {
	show.value = true;
}
defineExpose({ open });
</script>

<style scoped>
.avatar-uploader .avatar {
	width: 80px;
	height: 80px;
	display: block;
}
.avatar-uploader-icon {
	font-size: 32px;
	color: #8c939d;
	width: 80px;
	height: 80px;
	line-height: 80px;
	text-align: center;
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
}
.mb-4 {
	margin-bottom: 24px;
}
</style>
